{% extends "base.html" %}
{%load staticfiles%}

{% block css %}
<link rel="stylesheet" href="{% static 'bower_components/select2/dist/css/select2.min.css' %}">
<link rel="stylesheet" href="{% static 'dist/css/dataTables.bootstrap.min.css' %}">
{% endblock %}

{% block content %}
  <section class="content-header">
    <h1>
      工作流管理
      <small><a href="/manage/workflow_manage">工作流配置</a></small>
      <small><a id="workflowName"></a></small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="/manage/workflow_manage"><i class="fa fa-dashboard"></i> 工作流管理</a></li>
    </ol>
  </section>
  <section class="content">
      <div class="callout callout-info">
          请依次按照自定义字段、状态、流转的顺序来完成工作流的配置,配置完成后可以通过点击<a href="/manage/workflow_flow_chart/{{workflow_id}}" target="_blank">此链接</a>>查看对应流程图检验配置是否正确
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div class="row">
            <div class="col-xs-12">
              <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                  <li class="active"><a href="#customFieldAnchor" data-toggle="tab">自定义字段</a></li>
                  <li><a href="#stateAnchor" data-toggle="tab">状态</a></li>
                  <li><a href="#transitionAnchor" data-toggle="tab">流转</a></li>
                </ul>
                <div class="tab-content">
                  <div class="tab-pane active" id="customFieldAnchor">
                    <div class="box box-default">
                      <button type="button" class="btn btn-success" data-toggle="modal" data-target="#customFieldModal">
                          新增
                      </button>
                      <table id="custom_field_table" class="table table-striped table-bordered dataTable no-footer" >
                        <thead>
                          <tr>
                            <th>ID</th>
                            <th>字段标识</th>
                            <th>字段名称</th>
                            <th>字段类型</th>
                            <th>顺序ID</th>
                            <th>字段描述</th>
                            <th>创建人</th>
                            <th>创建时间</th>
                            <th>操作</th>
                          </tr>
                        </thead>
                        <tbody>
                        </tbody>
                      </table>
                    </div>
                    <div class="modal fade" id="customFieldModal">
                      <div class="modal-dialog" style="width: 980px;">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">工作流自定义字段</h4>
                          </div>
                          <div class="modal-body">
                            <form class="form-horizontal"  id='workflow_custom_field_form'>
                              <div class="box-body">
                                <div class="form-group">
                                  <label for="fieldKey" class="col-sm-3 control-label">字段标识<span style="color:red">*</span></label>
                                  <div class="col-sm-9">
                                    <input type="text" class="form-control" id="fieldKey" required="true" placeholder="请输入字段的标识,要求英文字母及下划线组成，以字母开头，且不得使用工单基础字段如(sn、title、state_id等字符)">
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="fieldName" class="col-sm-3 control-label">字段名称<span style="color:red">*</span></label>
                                  <div class="col-sm-9">
                                    <input type="text" class="form-control" id="fieldName" required="true" placeholder="请输入字段的名称，建议中文，如请假原因、服务器规格等">
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="fieldDesc" class="col-sm-3 control-label">字段描述</label> 
                                  <div class="col-sm-9">
                                    <input type="text" class="form-control" id="fieldDesc" placeholder="请输入字段的描述信息">
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="fieldType" class="col-sm-3 control-label">字段类型<span style="color:red">*</span></label>
                                  <div class="col-sm-9">
                                    <select class="form-control select2" id="fieldType" required="true" data-placeholder="选择该应用有权限的工作流"
                                      style="width: 100%;">
                                      <option value="5">字符型</option>
                                      <option value="10">整型</option>
                                      <option value="15">浮点型</option>
                                      <option value="20">布尔</option>
                                      <option value="25">日期</option>
                                      <option value="30">日期时间</option>
                                      <option value="35">单选框</option>
                                      <option value="40">多选框</option>
                                      <option value="45">下拉列表</option>
                                      <option value="50">多选下拉列表</option>
                                      <option value="55">文本域</option>
                                      <option value="60">用户名</option>
                                      <option value="70">多选用户名</option>
                                      <option value="80">附件</option>
                                    </select>
                                    <p class="help-block">如果你需要的类型不在此范围内，可以选择字符型或者文本域，然后指定label字段，实现自定义</p>
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="orderId" class="col-sm-3 control-label">顺序ID</label> 
                                  <div class="col-sm-9">
                                    <input type="number" class="form-control" id="orderId" value=0 required="true" placeholder="输入顺序ID,用于在展示工单详情的时候排序,越小越靠前">
                                    <p class="help-block">内置字段顺序为:  sn:10, title:20, state_id:40, state.state_name:41,participant_info.participant_name:50,
                                    participant_info.participant_alias:55,workflow.workflow_name:60,creator:80,gmt_created:100, gmt_modified:120 </p>
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="defaultValue" class="col-sm-3 control-label">默认值</label> 
                                  <div class="col-sm-9">
                                    <input type="text" class="form-control" id="defaultValue"  placeholder="前端展示时，可以将此内容作为表单中的该字段的默认值">
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="booleanFieldDisplay" class="col-sm-3 control-label">布尔显示定义</label> 
                                  <div class="col-sm-9">
                                    <input type="text" class="form-control" id="booleanFieldDisplay" value="{}" placeholder="请输入字段的名称，建议中文，如请假原因、服务器规格等">
                                    <p class="help-block">当为布尔类型时候，可以支持自定义显示形式。{"1":"是","0":"否"}或{"1":"需要","0":"不需要"}，注意数字也需要引号</p>

                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="fieldChoice" class="col-sm-3 control-label">选项</label> 
                                  <div class="col-sm-9">
                                    <input type="text" class="form-control" id="fieldChoice"  value="{}" placeholder="请输入字段的名称，建议中文，如请假原因、服务器规格等">
                                    <p class="help-block">radio,checkbox,select,multiselect类型可供选择的选项，格式为json如:{"1":"中国", "2":"美国"},注意数字也需要引号</p>
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="label" class="col-sm-3 control-label">标签</label> 
                                  <div class="col-sm-9">
                                    <input type="text" class="form-control" id="label" placeholder="请输入标签内容" value="{}">
                                    <p class="help-block">自定义标签，json格式，调用方可根据标签自行处理特殊场景逻辑，loonflow只保存文本内容</p>
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="fieldTemplate" class="col-sm-3 control-label">模板</label> 
                                  <div class="col-sm-9">
                                      <textarea class="form-control" id="fieldTemplate" rows="3" ></textarea>
                                      <p class="help-block">文本域类型字段前端显示时可以将此内容作为字段的placeholder或默认值</p>
                                  </div>
                                </div>
                                <input type="text" class="form-control" id="customFieldId" style="display:none">
                              </div>
                              <div class="box-footer">
                                <!-- <button type="submit" class="btn btn-info pull-right">确定</button> -->
                                <input type="button" value="保存" class="btn btn-info pull-right" onclick = "submitCustomField();" />
                              </div>
                            </form>
                          </div>
                        </div>
                      </div>
                    </div>                            
                  </div>
                  <div class="tab-pane" id="stateAnchor">
                    <div class="box box-default">
                      <button type="button" class="btn btn-success" data-toggle="modal" data-target="#stateModal">
                          新增
                      </button>
                      <table id="state_table" class="table table-striped table-bordered dataTable no-footer" style="width:100%">
                        <thead>
                          <tr>
                            <th>ID</th>
                            <th>名称</th>
                            <th>是否隐藏</th>
                            <th>顺序ID</th>
                            <th>类型</th>
                            <th>参与人类型</th>
                            <th>参与人</th>
                            <th>分配方式</th>
                            <th>创建人</th>
                            <th>创建时间</th>
                            <th>操作</th>
                          </tr>
                        </thead>
                        <tbody>
                        </tbody>
                      </table>
                    </div>
                    <div class="modal fade" id="stateModal">
                      <div class="modal-dialog" style="width: 980px;">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">工作流状态</h4>
                          </div>
                          <div class="modal-body">
                            <form class="form-horizontal"  id='workflow_state_form'>
                              <div class="box-body">
                                <div class="form-group">
                                  <label for="stateName" class="col-sm-3 control-label">名称 <span style="color:red">*</span></label>
                                  <div class="col-sm-9">
                                    <input type="text" class="form-control" id="stateName" required="true" placeholder="请输入状态的名称,如发起人编辑中，发起人tl审批中，结束等">
                                  </div>
                                </div>
                                <div class="checkbox">
                                    <label for="isHidden" class="col-sm-3 control-label">是否隐藏</label>
                                      <div class="col-sm-9">
                                        <input type="checkbox" id='isHidden'>
                                        <p class="help-block">开启时,获取工单步骤api中不显示此状态(当前处于此状态时除外)</p>
                                      </div>
                                      
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label for="stateOrderId" class="col-sm-3 control-label">顺序ID<span style="color:red">*</span></label>
                                    <div class="col-sm-9">
                                      <input type="number" class="form-control" id="stateOrderId" placeholder="输入顺序ID" value=0>
                                      <p class="help-block">此顺序id,用于获取工单step记录的排序用,因为step是顺序的，而loonflow的工作流是网状的，所以需要指定顺序id以便排序,数字越小越靠前</p>
                                  
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="stateTypeId" class="col-sm-3 control-label">状态类型<span style="color:red">*</span></label>
                                    <div class="col-sm-9">
                                      <select class="form-control select2" id="stateTypeId" data-placeholder="选择该应用有权限的工作流"
                                        style="width: 100%;" onchange="stateTypeChange();">
                                        <option value="0">普通状态</option>
                                        <option value="1">初始状态</option>
                                        <option value="2">结束状态</option>
                                        

                                      </select>
                                      <p class="help-block">每个工作流都需要有一个初始状态，一个结束状态，其他为普通状态。初始状态及结束状态无需设置参与人类型及参与人</p>
                                    </div>
                                </div>
                                <div class="checkbox">
                                    <label for="RememberLastManEnable" class="col-sm-3 control-label">是否记忆最后处理人</label>
                                      <div class="col-sm-9">
                                        <input type="checkbox" id='RememberLastManEnable'>
                                        <p class="help-block">开启后，到达此状态时会先检查之前是否有人在此状态处理过，如果有则处理人为最后一次处理的人</p>
                                      </div>
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label for="enableRetreat"" class="col-sm-3 control-label">允许创建人在此状态下撤回工单</label>
                                      <div class="col-sm-9">
                                        <input type="checkbox" id='enableRetreat'>
                                        <p class="help-block">开启后，工单的创建人可以在工单处于此状态时将工单撤回到初始状态</p>
                                      </div>
                                    </label>
                                </div>
                                <div class="form-group" id="stateParticipantTypeIdDiv">
                                    <label for="stateParticipantTypeId" class="col-sm-3 control-label">参与人类型</label>
                                    <div class="col-sm-9">
                                      <select class="form-control select2" id="stateParticipantTypeId" data-placeholder="选择该应用有权限的工作流"
                                        style="width: 100%;">
                                        <option value="1">个人</option>
                                        <option value="2">多人</option>
                                        <option value="3">部门</option>
                                        <option value="4">角色</option>
                                        <option value="5">变量</option>
                                        <option value="6">脚本</option>
                                        <option value="7">工单字段</option>
                                        <option value="8">父工单字段</option>
                                        <option value="10">hook</option>
                                        <option value="0">无</option>
                                        

                                      </select>
                                      <p class="help-block">初始状态的处理人类型和处理人和选择无和留空(状态的处理人仅供状态变化时确定新的处理人用，不会作为流转时目的状态，所以无需配置)，
                                      结束状态处理人类型和处理人也请选择无和留空，因为结束状态无需人再处理</p>
                                    </div>
                                </div>
                                <div class="form-group" id="stateParticipantDiv">
                                    <label for="stateParticipant" class="col-sm-3 control-label">参与人</label> 
                                    <div class="col-sm-9">
                                      <input type="text" class="form-control" id="stateParticipant" placeholder="请根据参与人类型填写相应的参与人">
                                      <p class="help-block">个人(username)\多人(多个username以,隔开\部门(部门id，多个部门以逗号隔开)\角色(角色id)\变量(creator:工单的创建人,creator_tl:工单创建人的TL,多个变量逗号隔开)\脚本记录的id\工单字段(逗号隔开多个)\父工单字段(逗号隔开多个)等，需要在此状态创建子工单时需要设置此处处理人为loonrobot。 当处理人类型为hook方式时,处理人需要按照如下规则配置
                                      {"hook_url":"http://xxx.com/xxx", "hook_token":"xxxx", "wait":true, "extra_info":"xxxx"}。详见文档</p>

                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="stateDistributeTypeId" class="col-sm-3 control-label">分配方式</label>
                                    <div class="col-sm-9">
                                      <select class="form-control select2" id="stateDistributeTypeId" data-placeholder="选择该应用有权限的工作流"
                                        style="width: 100%;">
                                        <option value="2">直接处理</option>
                                        <option value="1">主动接单</option>
                                        <option value="3">随机分配</option>
                                        <option value="4">全部处理</option>
                                        

                                      </select>
                                      <p class="help-block">如果你需要的类型不在此范围内，可以选择字符型或者文本域，然后指定label字段，实现自定义</p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="stateFieldStr" class="col-sm-3 control-label">表单字段</label> 
                                    <div class="col-sm-9">
                                      <input type="text" class="form-control" id="stateFieldStr" value='{"title":2}' placeholder="当工单处于此状态，且用户有该工单的处理权限时，工单详情界面将按照此处的配置来显示">
                                      <p class="help-block">json格式字典存储,包括读写属性1：只读，2：必填，3：可选. 示例：{"gmt_created":1,"title":2, "sn":1}, 内置特殊字段participant_info.participant_name:当前处理人信息(部门名称、角色名称)，state.state_name:当前状态的状态名,workflow.workflow_name:工作流名称</p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="stateLabel" class="col-sm-3 control-label">状态标签</label> 
                                    <div class="col-sm-9">
                                      <input type="text" class="form-control" id="stateLabel" placeholder="请输入标签" value="{}">
                                      <p class="help-block">json格式,可以使用此配置实现不同状态各种定制化需求，如在服务器申请工单的tl审批阶段显示发起人拥有的所有服务器权限列表</p>
                                    </div>
                                </div>


                                
                                <input type="text" class="form-control" id="stateId" style="display:none">
                                
                              </div>
                              <div class="box-footer">
                                <input type="button" value="保存" class="btn btn-info pull-right" onclick = "submitState();" />
                              </div>
                            </form>
                          </div>
                        </div>
                      </div>
                    </div>                            
                  </div>
                  <div class="tab-pane" id="transitionAnchor">
                    <div class="box box-default">
                      <button type="button" class="btn btn-success" data-toggle="modal" data-target="#transitionModal">
                          新增
                      </button>
                      <table id="transition_table" class="table table-striped table-bordered dataTable no-footer" style="width:100%">
                        <thead>
                          <tr>
                            <th>ID</th>
                            <th>名称</th>
                            <th>流转类型</th>
                            <th>定时器(单位秒)</th>
                            <th>源状态</th>
                            <th>目的状态</th>
                            <th>条件表达式</th>
                            <th>属性类型</th>
                            <th>是否校验必填项</th>
                            <th>点击弹窗提示</th>
                            <th>创建人</th>
                            <th>创建时间</th>
                            <th>操作</th>
                          </tr>
                        </thead>
                        <tbody>
                        </tbody>
                      </table>
                    </div>
                    <div class="modal fade" id="transitionModal">
                      <div class="modal-dialog" style="width: 980px;">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">工作流流转</h4>
                          </div>
                          <div class="modal-body">
                            <form class="form-horizontal"  id='workflow_transiton_form'>
                              <div class="box-body">
                                <div class="form-group">
                                  <label for="transitionName" class="col-sm-3 control-label">名称<span style="color:red">*</span></label>
                                  <div class="col-sm-9">
                                    <input type="text" class="form-control" id="transitionName" required="true" placeholder="请输入流转名称,如提交、保存、同意等">
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="transitionTypeId" class="col-sm-3 control-label">流转类型<span style="color:red">*</span></label>
                                  <div class="col-sm-9">
                                    <select class="form-control select2" id="transitionTypeId" required="true" data-placeholder="选择需要关联的子工作流" style="width: 100%;">
                                      <option value="1">常规流转</option>
                                      <option value="2">定时器流转(选择此类型时，需要设置定时器时间)</option>
                                    </select>
                                    <p class="help-block">子工作流用于比较特殊的情况，如项目及应用生命周期，当项目处于开发中，每个关联应用可能处于代码编写中、静态扫描、单元测试等状态</p>
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="timer" class="col-sm-3 control-label">定时器(单位秒)</label> 
                                  <div class="col-sm-9">
                                    <input type="number" class="form-control" id="timer" placeholder="请输入定时的时间" value=0>
                                    <p class="help-block">流转类型设置为定时器流转时生效,单位秒。处于源状态X秒后如果状态都没有过变化则自动流转到目标状态</p>
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="sourceStateId" class="col-sm-3 control-label">源状态<span style="color:red">*</span></label>
                                  <div class="col-sm-9">
                                    <select class="form-control select2" id="sourceStateId" required="true" data-placeholder="请选择源状态" style="width: 100%;">
                                    </select>
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="destinationStateId" class="col-sm-3 control-label">目标状态</label>
                                  <div class="col-sm-9">
                                    <select class="form-control select2" id="destinationStateId" data-placeholder="请选择目的状态" style="width: 100%;">
                                    </select>
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="conditionExpression" class="col-sm-3 control-label">条件表达式</label> 
                                  <div class="col-sm-9">
                                    <input type="text" class="form-control" id="conditionExpression" value="[]" placeholder="如有需要,请输入条件表达式">
                                    <p class="help-block">流转条件表达式，根据表达式中的条件来确定流转的下个状态，格式为[{"expression":"{days} &gt; 3 and {days} &le;10", "target_state_id":11},{"expression":"{days} &gt;10", "target_state_id":12}] 其中{}用于填充工单的字段key,运算时会换算成实际的值，当符合条件下个状态将变为target_state_id中的值,表达式只支持简单的运算或datetime/time运算.loonflow会以首次匹配成功的条件为准，所以多个条件不要有冲突</p>
                                  </div>
                                </div>
                                <div class="form-group">
                                  <label for="attributeTypeId" class="col-sm-3 control-label">属性类型<span style="color:red">*</span></label>
                                  <div class="col-sm-9">
                                    <select class="form-control select2" id="attributeTypeId" required="true" data-placeholder="选择需要关联的子工作流" style="width: 100%;">
                                      <option value="1">同意</option>
                                      <option value="2">拒绝</option>
                                      <option value="3">其他</option>
                                    </select>
                                    <p class="help-block">因为别的审批系统中对于每个操作都需要是同意还是拒绝，所以此处加个属性用于与其他审批系统对接</p>
                                  </div>
                                </div>
                                <div class="checkbox">
                                  <label for="fieldRequireCheck" class="col-sm-3 control-label">是否校验必填项</label>
                                    <div class="col-sm-9">
                                      <input type="checkbox" id='fieldRequireCheck'>
                                      <p class="help-block">默认在用户点击操作的时候需要校验工单表单的必填项,如果设置为否则不检查。用于如"退回"属性的操作，不需要填写表单内容</p>
                                    </div>
                                    
                                  </label>
                                </div>
                                <div class="checkbox">
                                  <label for="alertEnable" class="col-sm-3 control-label">点击弹窗提示</label>
                                    <div class="col-sm-9">
                                      <input type="checkbox" id='alertEnable'>
                                      <p class="help-block">可以用于当用户在处理工单时做特定操作时，弹窗提示信息。 如用户点击"拒绝"时弹窗提示要求用户确认是否真的拒绝，避免点错</p>
                                    </div>
                                  </label>
                                </div>
                                <div class="form-group">
                                  <label for="alertText" class="col-sm-3 control-label">弹窗内容</label> 
                                  <div class="col-sm-9">
                                    <input type="text" class="form-control" id="alertText" placeholder="弹窗中的内容,仅当'点击弹窗提示'开启时有效'">
                                  </div>
                                </div>
                                <input type="text" class="form-control" id="transitionId" style="display:none">
                              </div>
                                  
                              <div class="box-footer">
                                <input type="button" value="保存" class="btn btn-info pull-right" onclick = "submitTransiton();" />
                              </div>
                            </form>
                          </div>
                        </div>
                      </div>
                    </div>                            
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </section>

{% endblock %}

{% block js %}
<!-- jQuery 3 -->
<script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/adminlte.min.js' %}"></script>
<script src="{% static 'bower_components/select2/dist/js/select2.full.min.js' %}"></script>
<script src="{% static 'dist/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'dist/js/dataTables.bootstrap.min.js' %}"></script>
<script src="{% static 'dist/js/jquery.validate.js' %}"></script>
<script src="{% static 'dist/js/sweetalert.min.js' %}"></script>
<script src="{% static 'dist/js/workflow/workflow_manage_edit.js' %}"></script>



<script>
</script>
{% endblock %}
